<template> 
  <div class="view-1">
    <slot name="navbar"></slot>
    <div class="container">
      <app-direction-bar></app-direction-bar>
    </div>
    <div class="container bottom">
      <div class="left">
        <!-- <app-composition-left></app-composition-left> -->
      </div>
      <div class="right">
        <app-composition-right></app-composition-right>
      </div>
    </div>
  </div>
</template>
<script>
import AppCompositionRight from "@/components/charts/AppCompositionRight";
import AppCompositionLeft from "@/components/charts/AppCompositionLeft";
import AppDirectionBar from "@/components/charts/AppDirectionBar";

export default {
  components: { AppCompositionRight, AppCompositionLeft, AppDirectionBar },
  name: "AppViewOne",
  data() {
    return {
      composition: "app-composition-right"
    };
  }
};
</script>

<style>
.view-1 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.view-1 .container {
  margin: 5px;
  border-radius: 3px;
  border: 1px solid #ccc;
}
.view-1 .container.bottom {
  flex: 1;
}
.view-1 .container .left {
  float: left;
  height: 100%;
  width: 40%;
}
.view-1 .container .right {
  float: left;
  width: 60%;
  height: 100%;
}
</style>


